<template>
    <div>
        <Table  border :columns="columnsTable" :data="dataList">
            <template slot-scope="{ row }" slot="action">
                <div class="action-button">
                    <Button type="primary" size="small" style="margin-right: 5px" @click="updateForm()">发送预警</Button>
                </div>
            </template>
        </Table>

        <Page :total="100" :current="1" @on-change="changePage"></Page>
        <template>
            <Modal
                    v-model="modal1"
                    title="发送预警"
                    @on-ok="ok"
                    @on-cancel="cancel">
                <Checkbox-group class="ivu-row">
                    <Checkbox value="twitter" class="ivu-col ivu-col-span-24">
                        <Icon type="social-twitter"></Icon>
                        <span style="margin-right: 10px">姓名：张** </span>
                        |
                        <span  style="margin-left: 10px">联系电话：138****6688</span>
                    </Checkbox>
                    <Checkbox value="facebook" class="ivu-col ivu-col-span-24">
                        <Icon type="social-facebook"></Icon>
                        <span style="margin-right: 10px">姓名：王** </span>
                        |
                        <span  style="margin-left: 10px">联系电话：130****7788</span>
                    </Checkbox>
                    <Checkbox value="github" class="ivu-col ivu-col-span-24">
                        <Icon type="social-github"></Icon>
                        <span style="margin-right: 10px">姓名：李** </span>
                        |
                        <span  style="margin-left: 10px">联系电话：138****6578</span>
                    </Checkbox>
                    <Checkbox value="snapchat" class="ivu-col ivu-col-span-24">
                        <Icon type="social-snapchat"></Icon>
                        <span style="margin-right: 10px">姓名：赫** </span>
                        |
                        <span  style="margin-left: 10px">联系电话：138****5212</span>
                    </Checkbox>
                </Checkbox-group>
            </Modal>
        </template>
    </div>
</template>

<script>
import { findSchemaList } from '@/api/outbreak-management/early-warning/early-warning'
export default {
  data () {
    return {
      modal1: false,
      social: ['facebook', 'github'],
      columnsTable: [
        {
          title: '提报项目',
          key: 'reportPro',
          width: 150
        },
        {
          title: '应提报时间',
          key: 'reportTime'
        },
        {
          title: '当前状态',
          key: 'nowType'
        },
        {
          title: '上次提报时间',
          key: 'preReportTime'
        },
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          align: 'center'
        }
      ],
      dataList: [
        {
          reportPro: '交通运输',
          reportTime: '2020-03-02',
          nowType: '未提报',
          preReportTime: '2020-03-01'
        },
        {
          reportPro: '集中消杀防控',
          reportTime: '2020-03-02',
          nowType: '未提报',
          preReportTime: '2020-03-01'
        },
        {
          reportPro: '区县疫情',
          reportTime: '2020-03-02',
          nowType: '已完成',
          preReportTime: '2020-03-02'
        }
      ]
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    changePage () {
      console.log('111')
    },
    ok () {
      this.$Message.info('成功发送预警！')
    },
    cancel () {
      // this.$Message.info('成功发送预警！')
    },
    updateForm () {
      console.log('1111')
      this.modal1 = true
    },
    // 获取列表
    getList () {
      findSchemaList().then(res => {
        let { errcode, data } = res.data
        if (errcode === 0) {
          let list = []
          data.forEach(item => {
            list.push({ name: item.name, warning: '', remarks: item.remarks })
          })
          this.warningList = list
        } else {
          // this.$Message.error('获取预警列表失败!')
        }
      })
    }
  }
}
</script>

<style scoped>

</style>

<style>
    .submit-button{
        display: flex;
        justify-content: flex-end;
        margin: 10px 0 ;
    }
    .ivu-col.ivu-col-span-24.ivu-checkbox-wrapper{
        margin-bottom: 10px;
    }
</style>
